<template>
  <div class="article-list">
    <!-- 下拉刷新获取数据 -->
    <van-pull-refresh :success-text="refreshSuccessText"
      :success-duration="1500" v-model="isreFreshLoading" @refresh="onRefresh">
      <!-- 上拉刷新获取数据 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
        @load="onLoad">
        <!-- <van-cell v-for="(item,index) in list" :key="index"
          :title="item.title" /> -->
        <!-- 因为多个页面需要用到它所以封装成公共的组件 父传子:article='item' -->
        <article-item v-for="(item,index) in list" :key="index"
          :article='item' />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 根据传的频道id返回相对应的数据
import { getArticles } from '@/api/article'
// 导入展示文章内容的组件
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channel: { // 父传子，接受的频道
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp: null, // 请求下一页数据需要用到的时间戳
      error: false, // 是否加载失败
      // 控制下拉刷新的失败状态
      isreFreshLoading: false,
      refreshSuccessText: ''
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () { },
  methods: {
    // 初始化或滚动到底部的时候会触发调用 onLoad
    async onLoad () { // 上拉刷新
      try {
        // 1. 请求获取数据,根据所传的频道id获得数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        const res = await getArticles({ // 获得上拉刷新数据的方法
          channel_id: this.channel.id, // 频道的id
          // 上拉刷新时，需要自己来个初始的当前时间戳(Date.now()下)，还有数据在上拉时
          // 时间戳就变成第二次刷新数据时的时间戳
          timestamp: this.timestamp || Date.now(),
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
        // // 2. 把数据添加到 list 数组中，注意是添加不是覆盖
        console.log(res)
        this.list.push(...res.data.data.results)
        // 3.loading执行后为true，本次数据加载结束之后要把加载状态设置为结束
        // loading 关闭以后才能触发下一次的加载更多
        this.loading = false
        // 4. 判断数据是否全部加载完成
        // 刷新如果有数据(results),就能得到data.pre_timestamp时间戳,发请求获取这个时间戳的数据
        // 获取的数据results如果没有了就不需要获取时间戳了，finished为true不在触发加载更多
        if (res.data.data.results) {
          this.timestamp = res.data.data.pre_timestamp
        } else {
          // 如果没有数据了，把 finished 设置为 true，之后不再触发加载更多
          this.finished = true
        }
      } catch (err) {
        console.log('请求出错了', err)
      }
    },
    async onRefresh () { // 下拉刷新执行的函数
      try {
        const res = await getArticles({ // 获得下拉刷新数据的方法
          channel_id: this.channel.id, // 频道的id
          // 因为是下拉刷新所以获取最新的数据，时间戳就是每次刷新的当前时间Date.now()
          timestamp: Date.now(),
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
        // 每次下拉刷新的数据，需要放在数组list的头部
        this.list.unshift(...res.data.data.results)
        // 这时候下拉刷新的loading 状态为true需要改成false
        this.isreFreshLoading = false
        // 提示下刷新数据成功
        this.refreshSuccessText = `刷新成功，更新了${res.data.data.results.length}条数据`
      } catch (err) {
        this.refreshSuccessText = '刷新失败'
        this.isreFreshLoading = false
      }
    }
  }

}
</script>

<style scoped lang="less">
// 给每个列表设置独自的滚动区域
.article-list {
  // 百分比单位是相对于父元素的
  // height: 100%;

  // 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响
  // 1vw = 视口宽度的百分之一
  // 1vh = 视口高度的百分之一
  height: 79vh;
  overflow-y: auto;
}
</style>
